<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="utf-8">
    <title>百度网盘同步助手</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" th:href="@{/layuiadmin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/layuiadmin/style/admin.css}">
    <link rel="stylesheet" media="all" href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.min.css">
</head>
<body class="layui-layout-body">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">同步设置</div>
                <div class="layui-card-body" pad15>

                    <div class="layui-form" wid100 lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">同步账号</label>
                            <div class="layui-input-block">
                                <select id="account" name="account"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">同步源多个</label>
                            <div class="layui-input-block">
                                <input type="text" id="syncSouceIds" name="syncSouceIds" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务启动时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="taskStartTime" lay-verify="datetime" autocomplete="off"
                                       class="layui-input sync-date-group">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="taskEndTime" lay-verify="datetime" autocomplete="off"
                                       class="layui-input sync-date-group">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="taskEndTime" lay-verify="datetime" autocomplete="off"
                                       class="layui-input sync-date-group">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上次任务结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="taskLastEndTime" lay-verify="datetime" autocomplete="off"
                                       class="layui-input sync-date-group">
                            </div>
                        </div>
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0;">
                                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="treeWindow">
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</script>

<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.all.min.js"></script>

<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'laydate'], () => {
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;

        $('.sync-date-group').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click',
                done: function (value) {
                    if (value) {
                        var split = value.split(" ");
                        if (split[1] == "00:00:00") {
                            this.dateTime.hours = 23;
                            this.dateTime.minutes = 59;
                            this.dateTime.seconds = 59;
                        }
                    }
                }
            });
        });

        $("#syncSouceIds").on("click", () => {
            layer.open({
                type: 1,
                skin: 'layui-layer-admin',
                anim: 5,
                area: ['375px', '500px'],
                content: $('#treeWindow').html(),
                success: function(layero, index){

                    let setting = {
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        callback: {
                            onClick: function (event, treeId, treeNode) {
                                // 当节点被点击时，加载后台数据
                                loadDataFromBackend('121.c6349a56fcee2875efbba8a2ebcb8ecc.Y3vHoxLG1-moFkf0uafdmh9PtnRUjlMXqQcKCdY.tdbWJA', treeNode);
                            },
                            onCheck: onCheck
                        },
                        check: {
                            enable: true
                        },
                        view: {
                            fontCss: getFont,
                            showIcon: false
                        }
                    };

                    function getFont(treeId, node) {
                        return node.font ? node.font : {};
                    }


                    let zNodes = [
                        {id: "/", pId: 0, name: "我的网盘", open: true},
                    ];

                    $(document).ready(function () {
                        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    });

                    /*
                     将格式为
                     {"path":"/apps","share":0,"fs_id":0}
                     的解析为
                     {id, name, pid}
                     */
                    function parseNode(result) {
                        let split = result.path.split("/");
                        let pid = '/' + split[split.length - 2];
                        let name = split[split.length - 1];
                        let id = result.path;
                        return {id, name, pid};
                    }

                    // 加载后台数据的函数
                    const loadDataFromBackend = (account, oldNode) => {
                        let dir = oldNode.id;
                        $.ajax({
                            url: '/baidu/pan/rest/2.0/xpan/file/directory', // 后台数据的URL
                            type: 'GET',
                            data: {account, dir}, // 发送到后台的数据
                            dataType: 'json',
                            success: function (result) {
                                let data = result.data;
                                // 假设后台返回的数据格式与zTree的simpleData兼容
                                $.each(data, (index, newNode) => {
                                    let {id, name, pid} = parseNode(newNode)
                                    // 添加新节点
                                    let treeNode = {
                                        'name': name,
                                        'id': id,
                                        'pId': pid,
                                        'open': 'true'
                                    };
                                    // 添加到zTree中
                                    let newZNode = $.fn.zTree.getZTreeObj("treeDemo").addNodes(oldNode, treeNode, true);
                                })
                            }
                        });
                    }

                    // 复选框选中或取消选中的回调函数
                    let syncSouceIds = [];
                    function onCheck(event, treeId, treeNode) {
                        syncSouceIds.push(treeNode.id)
                        $("#syncSouceIds").val(syncSouceIds)
                        console.log(treeNode);
                    }
                }
            });
        });

        $.get('/user/list', function (result) { //请求成功完成后要执行的方法
            const select = $("#account");
            select.append(new Option('请选择'));
            $.each(result, function (index, item) {
                select.append(new Option(item.username, item.id));// 下拉菜单里添加元素
            });
            layui.form.render("select");
        })

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            parent.layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

    });
</script>
</body>
</html>